<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			td div span{
				color: coral;
			}
		</style>
		<script type="text/javascript">		
		function checkName(){
			//获取用户名输入控件对象的内容
				var txtName = document.getElementById("txtName").value;
				//信息提示框
				var sptxtName = document.getElementById("sptxtName");
				if(txtName == null || txtName == ""){
					//验证失败
					isChecked = false;
					//提示信息					
					sptxtName.innerHTML = "请输入姓名！";
					sptxtName.style.color = "red";
					//msg += "请输入姓名！\n"
					document.getElementById("txtName").focus();
					//修改标志变量
					return false;
				}else{
					sptxtName.innerHTML="";
					//修改标志变量
					return true;
				}
		}
		
		
		function checkPsw(){
			//密码非空验证
				var txtPsw = document.getElementById("txtPsw").value;
				
				//信息提示框
				var sptxtPsw = document.getElementById("sptxtPsw");
				if(txtPsw == null || txtPsw == ""){		
					
					//错误提示信息
					//提示信息					
					sptxtPsw.innerHTML = "请输入密码！";
					return false;
				}else{
					//验证通过  清空提示内容
					sptxtPsw.innerHTML = "";
					return true;
				}
		}
		
		function checkSex(){
				// 验证性别 是否选择
				// 使用循环验证单选组是否进行了选择
				var radioSex = document.getElementsByName("radSex");
				//遍历所有的单选组件，验证是否进行了选择
				var isChSex = false;
				for(var i =0;i<radioSex.length;i++){
					//判定是否进行了选择
					if(radioSex[i].checked){
						//选择了
						isChSex = true;
						//结束循环
						break;
					}
				}
				
				//信息提示框
				var sptxtSex = document.getElementById("sptxtSex");
				
				//设置性别验证结果
				if(!isChSex){					
					//错误提示信息
					sptxtSex.innerHTML = "请选择性别！";
					return false;
				}else{
					//清空错误提示信息
					sptxtSex.innerHTML = "";
					return true;
				}
		}
		
		function checkHobby(){
			// 验证性别 是否选择
				// 使用循环验证单选组是否进行了选择
				var chHobby = document.getElementsByName("chHobby");
				//遍历所有的单选组件，验证是否进行了选择
				var isChHobby = false;
				for(var i =0;i<chHobby.length;i++){
					//判定是否进行了选择
					if(chHobby[i].checked){
						//选择了
						isChHobby = true;
						//结束循环
						break;
					}
				}
				
				//信息提示框
				var sptxtHobby = document.getElementById("sptxtHobby");
				//设置性别验证结果
				if(!isChHobby){
					
					//错误提示信息
					sptxtHobby.innerHTML = "请选择兴趣！";
					return false;
				}else{
					sptxtHobby.innerHTML = "";
					return true;
				}
		}
		
		
		function checkMe(){
			//用户名验证
			var ischName = checkName();
			//密码验证
			var ischPsw = checkPsw();
			//性别
			var isSex = checkSex();
			console.info(isSex);
			if(!isSex){
				//信息提示框
				var sptxtSex = document.getElementById("sptxtSex");
				//错误提示信息
				sptxtSex.innerHTML = "请选择性别!";
			}
			
			//兴趣验证
			var ischHobby = checkHobby();
			if(!ischHobby){
				//信息提示框
				var sptxtHobby = document.getElementById("sptxtHobby");
				//错误提示信息
				sptxtHobby.innerHTML = "请选择兴趣！";
			}
			
			//验证学历
			//。。。。。。。。
			
			if(ischName && ischPsw && isSex && ischHobby){
				//验证通过
				return true;
			}else{				
				return false;
			}
		}
		</script>
	</head>

	<body>
		<!--form表单：客户端浏览器用来向服务器端进行信息提交的标签
			写在form表单的标签的值才会被提交给服务器
			action -- 指定的是服务器端的那个程序（类-方法）进行响应；
			method -- 使用哪种方式进行数据从客户端发送到服务器。
			      选项：get -- 将客户端数据信息附加在访问连接url的尾端进行发送信息；
			                 缺点：需要附加在url之后，可能会以明文的形式显示，信息不安全；
			                长度会受到限制（不能大于255个制度） 
			                汉字容易乱码（字节流方式传输）
			       post -- 将客户端数据信息以数据包的形式发送到服务器端
			                 不在上述问题。
		-->
		<div align="center">
		<form id="from1" action="#" method="get">				
			<table border="1" cellpadding="0" cellspacing="0" 
				bordercolor="#AAD7DB" style="width: 80%; align-self: center;">
			<tbody>
			<tr>
				<td>姓名</td><td><input type="text" id="txtName" name="txtName" onblur="checkName();"/><div><span id="sptxtName"></span></div></td>
			</tr>
			<tr>
				<td>登录密码</td>
				<td><input type="password" id="txtPsw" name="txtPsw" onblur="checkPsw(this);"/><div><span id="sptxtPsw"></span></div></td>
			</tr>
			<tr>
				<td>性别</td>
				<!--radio类型的输入框：需要name属性值一样，才具有互斥选择性-->
				<td><input type="radio" id="radSex" name="radSex" onclick="checkSex();" /> 女
				    <input type="radio" id="radSex2" name="radSex"  onclick="checkSex();"/>男	
				    <div><span id="sptxtSex"></span></div>
			</tr>
			
			<tr>
				<td>个人简历</td>
				<td><input type="file" id="fileResume" name="fileResume"/></td>
			</tr>
			<tr>
				<td>兴趣爱好</td>
				<!--checkbox多选框：需要name属性保持一致；服务器是使用数组对一组checkbox控件的值进行接收的-->
				<td><input type="checkbox" id="chHobby1" name="chHobby" onclick="checkHobby();"/>游泳
					<input type="checkbox" id="chHobby2" name="chHobby" onclick="checkHobby();"/>爬山
				<input type="checkbox" id="chHobby3" name="chHobby" onclick="checkHobby();"/>dota
				<input type="checkbox" id="chHobby4" name="chHobby" onclick="checkHobby();"/>coding
				<input type="checkbox" id="chHobby5" name="chHobby" onclick="checkHobby();"/>testing
				<div><span id="sptxtHobby"></span></div>
				</td>
				
			</tr>
			<tr>
				<td>隐藏控件</td>
				<td><input style="" type="hidden" name="txthidden" id="txthidden" value="520" /></td>
			</tr>
			<tr>
				<td>学历</td>
				<td><select id="selectXL" name="selectXL" style="width: 120px;">
					<option value=""></option>
					<option value="DZ">大专</option>
					<option value="BK">本科</option>					
					<option value="SS">硕士</option>
					<option value="BS">博士</option>
				</select></td>
			</tr>
			<tr>
				<td>自我介绍</td>
				<td><textarea id="txtIntroduce" name="txtIntroduce" style="width: 200px;height: 60px;"></textarea></td>
			</tr>
			<tr>
				<td>邮箱</td>
				<td><input style="" name="txtMail" id="txtMail" /></td>
			</tr>
			<tr>
				<td><input type="button" value="提交" id="btnSubmit" onclick="return doSubmit();"/>
				<input type="submit" value="提交2" id="btnSubmit" onclick="return checkMe();"/></td>
				<td><input type="reset" value="重置" id="btnSubmit"/></td>
			</tr>
		</tbody>
		</table>
			
			
			
		</form>
		</div>
	</body>

</html>